<template>

    <div>
        <div id="btn1">
            
            <Button @click="handleSelectAll(true)" type="primary" class="p1"><Icon type="checkmark-circled" style="margin-right:10px;"></Icon>设置全选</Button>
            <Button @click="handleSelectAll(false)" type="primary" class="p1"><Icon type="android-cancel" style="margin-right:10px;"></Icon>取消全选</Button>
            <Input v-model="filter.name" class="p1" style="width:300px;">
                <Button slot="append" icon="ios-search"  @click="search"></Button>
            </Input>
            <Button type="warning" class="p2" @click="deleSelect"><Icon type="ios-trash" style="margin-right:10px;"></Icon>删除选中</Button>
            <Button type="primary" @click="modal1 = true" class="p2"><Icon type="android-person-add" style="margin-right:10px;"></Icon>添加用户</Button>
        </div>
        
        <Table border ref="selection" :columns="columns7" :data="list" @on-selection-change="changeSelection"></Table>
        <Page :total="filter.total" show-elevator show-total show-sizer @on-change="changePage" @on-page-size-change="onPageSizeChange"  :page-size="filter.limit" style="margin:20px 0 80px 0;"  ></Page>
        <Modal
            v-model="modal1"
            title="普通的Modal对话框标题"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <FormItem label="姓名" prop="name">
                    <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
                </FormItem>
                <FormItem label="邮箱" prop="email">
                    <Input v-model="formValidate.email" placeholder="请输入邮箱"></Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="formValidate.password"></Input>
                </FormItem>
                <FormItem label="确认密码" prop="passwdCheck">
                    <Input type="password" v-model="formValidate.passwdCheck"></Input>
                </FormItem>
                <FormItem label="ID" prop="id" style="display: none">
                    <Input type="text" v-model="formValidate.id"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </FormItem>
            </Form>
        </Modal>        
    </div>
</template>
<script>
    import Base from '../../common/Base.js';
    import md5 from 'crypto-js/md5';
    // console.log(md5('1111').toString())
    export default {
        mixins:[Base],
        data () {
            //表单验证密码
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.formValidate.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formValidate.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.formValidate.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };



            return {
                module:'users',
                columns7: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '密码',
                        key: 'password'
                    },
                    {
                        title: '邮箱',
                        key: 'email'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'edit'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit();//将数据添加到表单
                                            this.formValidate.name=params.row.name;
                                            this.formValidate.password=params.row.password;
                                            this.formValidate.passwdCheck=params.row.password;
                                            this.formValidate.email=params.row.email;
                                            this.formValidate.id=params.row._id;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small',
                                        icon:'android-cancel'
                                    },
                                    on: {
                                        click: () => {
                                           this.$http({//获取id并删除改表单
                                                method:'DELETE',
                                                url:'http://localhost:3000/users/data/'+params.row._id
                                            }).then((res)=>{
                                                this.loadmsg();
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                value13: '',
                formValidate: {
                    name: '',
                    email: '',
                    password: '',
                    passwdCheck: '',
                    id:''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: '姓名不能为空', trigger: 'blur' }
                    ],
                     email: [
                        { required: true, message: '邮箱不能为空', trigger: 'blur' },
                        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                    ],
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            changeSelection(selection){//返回选中按钮的数组arr
               this.arr=[];
                for(var i=0;i<selection.length;i++){
                    this.arr.push(selection[i]._id)
                }
            },
            deleSelect(){//删除选中按钮arr里的id
                var len=this.arr.length;
                for(var i=0;i<len;i++){
                    this.$http({//获取id并删除改表单
                        method:'DELETE',
                        url:'http://localhost:3000/users/data/'+this.arr[i]
                    }).then((res)=>{
                        this.loadmsg();
                    });
                }
            },
            edit () {//改变modal1的值，并弹出对话框
              this.modal1 = true;
            },
            ok () {
                this.$Message.info('点击了确定');
            },
            cancel () {//取消表单时候清空表单内容
                this.$Message.info('点击了取消');
                this.clear();
            },
            clear(){//清空表格
                this.formValidate.name='';
                this.formValidate.password='';
                this.formValidate.passwdCheck='';
                this.formValidate.email='';
                this.formValidate.id='';
            },
            handleSubmit (name) {//提交按钮
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        //如果有id时候则为修改，没有时候则为添加数据
                        if(this.formValidate.id!=''){
                            this.$http({
                                method:'POST',
                                url:'http://localhost:3000/users/data/'+this.formValidate.id,
                                data:this.formValidate
                            }).then((res)=>{
                                this.modal1 = false;
                                this.$Message.success('提交成功!');
                                this.loadmsg();
                            });  
                        }else{
                            this.$http({
                                method:'POST',
                                url:'http://localhost:3000/users/data',
                                data:this.formValidate
                            }).then((res)=>{
                                this.modal1 = false;
                                this.$Message.success('提交成功!');
                                this.clear();
                                this.loadmsg();
                            });
                        }
                        
                        //console.log(this.formValidate);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {//表格重置按钮
                this.$refs[name].resetFields();
            }
        },
        created(){
            this.loadmsg();
        }
    }
</script>
<style scoped>
    #btn1{
        height:40px;
    }
    .p1{
        float: left;
        margin-right:10px;
    }
    .p2{
        float: right;
        margin-left: 10px;
    }
</style>
